'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
import {
    HttpService,
    Toast,
} from '../Http';
import {
    dateFormat,
    taskFinish
} from '../Tools'
import Header from './Common/Header'
import ConfirmBox from './Common/ConfirmBox'

import $ from 'jquery'

export default class Notice extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showMask: false,
            delValue: '删除',
            show: 0,
            dataList: []
        }
        this.taskTimes = 0
    }
    componentWillMount() {
        this.getDataList()
    }

    //获取数据列表
    getDataList() {
        HttpService.query({
            url: '/teacherapp/notice/getList',
            data: {
                token: localStorage.appToken
            },
            success: (res => {
                if (res.code == 20024) {
                    this.setState({
                        dataList: res.data
                    })
                    if (res.data.length == 0) {
                        $('.pjbheader .word').css('color', '#ccc').attr('del', 1)
                    } else {
                        $('.pjbheader .word').css('color', '').removeAttr('del')
                    }
                    return
                }
                Toast.toast(res.msg);
            })
        })
    }

    //删除操作
    deleteNtc() {
        let ids = []
        $('.tcnotice input:checked').each(function() {
            ids.push($(this).val())
        })
        if (ids.length == 0) {
            Toast.toast('请至少选择一条');
            return
        }
        Toast.toast('正在删除..');
        ids.map((item, index) => {
            HttpService.query({
                url: '/teacherapp/notice/del',
                sync: false,
                data: {
                    token: localStorage.appToken,
                    noticeid: item
                },
                success: (res => {
                    if (res.code != 20010)
                        Toast.toast(res.msg);
                })
            })
            if (index == ids.length - 1) {
                Toast.toast('删除成功');
                this.setState({
                    delValue: '删除'
                })
                setTimeout(() => {
                    this.getDataList();
                }, 200)
            }
        })
    }

    //回复操作
    addNtc() {
        document.body.scrollTop = 99999999;
        let reply = document.getElementById('reply').value;
        if (reply.replace(/\s/g, '') == '') {
            Toast.toast('评论内容不能为空！');
            return;
        } else if (reply.indexOf('%') > -1) {
            Toast.toast('评论内容不能为包含"%"！');
            return;
        }
        HttpService.query({
            url: '/teacherapp/notice/add',
            sync: false,
            data: {
                token: localStorage.appToken,
                notice: reply
            },
            success: (res => {
                if (res.code == 20022) {
                    document.getElementById('reply').value = ''
                    this.getDataList();
                    if (this.taskTimes == 0) {
                        this.taskTimes = 1
                        taskFinish('发布班级通知', (status, config) => {
                            if (status) {
                                this.config = config;
                                this.setState({
                                    show: 1
                                })
                            }
                        })
                    }
                    return
                }
                Toast.toast(res.msg);
                this.replyContentBlur()
            })
        })
    }
    //回复获得焦点
    replyContentFocus() {
        this.setState({
            showMask: true
        });
        sessionStorage.interval = setInterval(function() {
            document.body.scrollTop = 99999999;
        }, 1000)
    }
    //回复失去焦点
    replyContentBlur() {
        clearInterval(sessionStorage.interval);
        delete sessionStorage.interval
        this.setState({
            showMask: false
        });
    }

    //删除处理
    delTips() {
        if (this.state.delValue == '取消') {
            $('.tcnotice input:checked').each(function(index) {
                $(this).get(0).checked = false
            })
        } else if ($('.pjbheader .word').attr('del') == 1) {
            return
        }
        this.setState({
            delValue: this.state.delValue == '删除' ? '取消' : '删除'
        })
    }

    render() {
        const {
            showMask,
            dataList,
            delValue
        } = this.state;
        const dataTagList = dataList.map((item, index) => {
            return (
                <li>
                    <div className='timebar'>{dateFormat(new Date(item.createtime.replace(/\-/g,'/')))}</div>
                    <label className="pnt_item">
                        <input type='checkbox' value={item.noticeid} />
                        <div className='msgitem'><p className='content'><span><i></i>{item.notice}</span></p></div>
                    </label>
                </li>
            )
        })
        return (
            <div className="index_page ptop" >
                <Header title='班级通知' link={<a className="h_link word" onClick={this.delTips.bind(this)}>{delValue}</a>} />
                <ul className={delValue=='删除'?'tcnotice':'tcnotice tcnoticeslt'}>
                    {dataTagList}
                </ul>
                <div className='mask' style={{display:showMask == false?'none':'block'}} />
                {
                    delValue=='删除'?<div className="reply">
                        <div className="content"><input type="text" id="reply" placeholder="输入内容" onBlur={this.replyContentBlur.bind(this)} onFocus={this.replyContentFocus.bind(this)} maxLength='200'/></div>
                        <div className="button"><input type="submit" value='发送' onClick={this.addNtc.bind(this)}/></div>
                    </div>:
                    <input type='button' className='ntcbtndel' value='删除通知' onClick={this.deleteNtc.bind(this)} />
                }
                <ConfirmBox config={this.config} show={this.state.show} sigle='1'/>
            </div>
        )
    }
}
